<template>
  <div v-show="showModal" class="my-modal c-w100 c-h c-pf c-p-l0 c-p-t0 c-flex-row c-flex-center">
    <div class="bg-masker c-w100 c-h c-pa c-p-l0 c-p-t0" @click="closeModal" data-type='cancel'></div>
    <div class="my-content c-br10">
      <slot></slot>
    </div>

  </div>
</template>

<script>
export default {
  components: {},
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
    };
  },
  methods: {
    closeModal(e) {
      this.$emit("closedModal");
    }
  },
  activated() { }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.my-modal {
  z-index: 1002;
}

.bg-masker {
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  z-index: -1;
}

.my-content {
  z-index: 1;
  width: 13.5rem;
  background-color: #fff;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
}
</style>
